<template>
    <div id="vue_box">
        <div><h2 class="study_info_title">vueJs</h2></div>
        <hr>
        <div class="study_info" v-for="(item,index) in vueList" :key="index">
            <div class="title">
                <h3>{{item.title}}</h3>
            </div>
            <div><img :src="item.imgUrl" alt="" v-show="item.imgUrl !== null"></div>
            <div class="note" v-html="item.content">
            </div>
            <div class="author">作者：{{item.authorName}}</div>
        </div>
    </div>
</template>

<script>
    import {getNote} from "../../../network/article";

    export default {
        name: "vueNote",
        data(){
            return {
                vueList:[]
            }
        },
        methods:{
            getVueNote(){
                getNote('vue').then(res => {
                    if (res.data.meta.status !== 200){
                        this.$message.warning(res.data.meta.msg);
                    }else{
                        this.vueList = res.data.data;
                    }
                })
            },
        },
        created() {
            this.getVueNote();
        }
    }
</script>

<style scoped lang="less">
    #vue_box{
        background-color: white;
        width: 100%;
        opacity: 0.9;
        display: flex;
        flex-direction: column;
        border: 5px thistle dashed;
    }
    .study_info{
        width: 100%;
        border-bottom: 5px silver solid;
        .title{
            font-weight: bolder;
            font-style: italic;
            animation: bottom linear 5s;
            animation-iteration-count: infinite;
            padding: 10px 10px;
        }
        .note{
            word-wrap: break-word;
            font-size: 1rem;
            padding:0 0 7px 25px;
            background-color: #fffdef;
        }
        .author{
            text-align: right;
        }
    }
    @keyframes bottom {
        0%{
            color: #b3d8ff;
        }
        45%{
            color: skyblue;
        }
        75%{
            color: lightpink;
        }
        100%{
            color: #b3d8ff;
        }
    }
    .study_info_title{
        animation: title_action linear 5s;
        font-style: oblique;
    }
    @keyframes title_action {
        0%{
            color: lightpink;
            transform: scale(0);
        }
        25%{
            color: lightskyblue;
            transform: scale(0.25);
        }
        50%{
            color: lightcoral;
            transform: scale(0.5);
        }
        75%{
            color:darkseagreen;
            transform: scale(0.75);
        }
        100%{
            color: black;
            transform: scale(1);
        }
    }
    img{
        width: 100%;
        height: 20rem;
    }
    @media screen and (min-width: 1200px){
        img{
            width: 30rem;
            height: 15rem;
        }
        .study_info{
            .note{
                font-size: 0.8rem;
            }
        }
    }

</style>